<template>
  <div class="main">

    <h1>网格元素</h1>

    <p>网格布局父元素的 <em>display</em> 属性需要设置 <em>grid</em> 或 <em>inline-grid</em>。</p>

    <p>网格容器内的直系子元素自动布局为网格元素。</p>

    <div class="grid-container">
      <div :class="'grid-item'+(current===1?' active':'')">{{1}}</div>
      <div :class="'grid-item'+(current===2?' active':'')">{{2}}</div>
      <div :class="'grid-item'+(current===3?' active':'')">{{3}}</div>
      <div :class="'grid-item'+(current===8?' active':'')">{{8}}</div>
      <div :class="'grid-item'+(current===9?' active':'')">{{9}}</div>
      <div :class="'grid-item'+(current===4?' active':'')">{{4}}</div>
      <div :class="'grid-item'+(current===7?' active':'')">{{7}}</div>
      <div :class="'grid-item'+(current===6?' active':'')">{{6}}</div>
      <div :class="'grid-item'+(current===5?' active':'')">{{5}}</div>
      <el-button @click="go">开始</el-button>
      <el-button @click="stop">暂停</el-button>

          <img src="/images/activity.svg" style="color: red;width: 30px;height: 30px"/>

    </div>
  </div>
</template>

<script>
export default {
  name:"MainContent",
  data(){
    return {
      current:1,
      speed:200,
      initSpeed:200,
      timespan:2000,
      started:false,
      up:true,
      curSpeedStatus:0,//0加速 1减速 2 匀速
      hit:null,
      minspan:8
    }
  },
  methods:{
    resetConfig(){
        this.speed=200
        this.initSpeed=200
        this.timespan=2000
        this.up=true
        this.curSpeedStatus=0//0加速 1减速 2 匀速
        this.started=false
        this.next=false
        this.hit=null
        this.minspan=8
    },
    go(){
      if(this.started)return
      this.started=true

      this.doStart()
    },
    doStart(){
      let timer=setTimeout(()=>{
        if(this.current===8){
          this.current=0
        }

        if(this.speed<60){
          this.curSpeedStatus=2
        }

        this.current++;

        if(this.curSpeedStatus===0){
          this.speed-=10
        }else if(this.curSpeedStatus===1){
          this.speed+=10
        }

        if(this.hit){
          this.minspan--;
        }

        if(this.hit&&this.current===this.hit&&this.curSpeedStatus===1&&this.minspan<=0){
          console.log("恭喜您中奖了")
          clearTimeout(timer)
          this.resetConfig()
          return
        }
        this.doStart()
      },this.speed)
    },
    stop(){
        this.curSpeedStatus=1
        this.speed=60
        this.next = Math.abs(this.current - this.hit) < 4;
        this.hit=Math.ceil(Math.random()*8)
        console.log(this.hit)
    }
  }
}
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  justify-content: center;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item.active{
  background-color: gray;
}

.nav .nav_inner{
  width: 1200px;
  height: 50px;
  margin: 0 auto;
}
</style>
